<template>
    <div class="header">
        <div class="l_content">
            <el-button type="primary" icon="el-icon-menu" @click="isHidden()" size="mini"></el-button>
            <span class="title">首页</span>
        </div>
        <div class="r_content">
            <el-dropdown  trigger="click">
                <span class="el-dropdown-link">
                    <img src="../assets/head.jpg" alt="" class="head_pic">
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    methods: {
        isHidden() {

            this.$store.commit('updateMenu')
            console.log(this.$store.state.tab.isCollapse);
        }
    }
}
</script>

<style scoped lang="less">
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    .l_content {
        .title {
            margin-left: 20px;
        }
    }
    .r_content {
        height: 100%;
        .el-dropdown {
            height: 100%;
            .el-dropdown-link {
                height: 100%;
                display: flex;
                align-items: center;
                .head_pic {
                    width: 60px;
                    height: 80%;
                }
            }
        }
    }
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>